<!-- 网站信息 -->
<template>
    <div class="website-information">
        <el-form ref="formRef" :rules="rules" class="ls-form" :model="formData" label-width="120px">
            <el-card shadow="never" class="!border-none">
                <div class="text-xl font-medium mb-[20px]">版权设置</div>
                <el-form-item label="版权开关" prop="copyright_switch">
                    <div class="w-80">
                        <el-radio-group v-model="formData.copyright_switch">
                            <el-radio :label="1">开启</el-radio>
                            <el-radio :label="2">关闭</el-radio>
                        </el-radio-group>
                    </div>
                </el-form-item>
                <el-form-item label="选择样式">
                    <div style="display: flex;">
                        <div class="boxcoprigth" :class="formData.copyright_style == 1 ? 'border-box' : ''"
                            @click="changestyle(1)">
                            版权信息
                        </div>
                        <div class="boxcoprigth" :class="formData.copyright_style == 2 ? 'border-box' : ''"
                            @click="changestyle(2)">
                            <img src="@/assets/images/shop.png" style="width: 24px;height:24px;" />
                            版权信息
                        </div>
                        <div class="boxcoprigth" style="flex-direction: column;"
                            :class="formData.copyright_style == 3 ? 'border-box' : ''" @click="changestyle(3)">
                            <img src="@/assets/images/shop.png" style="width: 24px;height:24px;" />
                            版权信息
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="版权信息" prop="copyright_is_strortext" v-if="formData.copyright_style == 1"
                    @change="changestro">
                    <div class="w-80">
                        <el-radio-group v-model="formData.copyright_is_strortext">
                            <el-radio :label="1">纯文字</el-radio>
                            <el-radio :label="2">富文本</el-radio>
                        </el-radio-group>
                    </div>
                </el-form-item>
                <el-form-item label="文字版权" prop="copyright_text"
                    v-if="formData.copyright_is_strortext == 1 && formData.copyright_style == 1">
                    <div class="w-80">
                        <el-input v-model="formData.copyright_text" placeholder="请输入文字版权" clearable />
                    </div>
                </el-form-item>
                <el-form-item label="跳转手机号" prop="copyright_text"
                    v-if="formData.copyright_is_strortext == 1 && formData.copyright_style == 1">
                    <div class="w-80">
                        <el-input v-model="formData.copyright_mobile" placeholder="请输入手机号" clearable />
                    </div>
                </el-form-item>
                <el-form-item label="富文本" prop="copyright_text"
                    v-if="formData.copyright_is_strortext == 2 && formData.copyright_style == 1">
                    <editor class="mb-10" v-model="formData.copyright_text" height="500"></editor>
                </el-form-item>
                <el-form-item label="文字版权" prop="copyright_text" v-if="formData.copyright_style != 1">
                    <div class="w-80">
                        <el-input v-model="formData.copyright_text" placeholder="请输入文字版权" clearable />
                    </div>
                </el-form-item>
                <el-form-item label="跳转手机号" prop="copyright_text" v-if="formData.copyright_style != 1">
                    <div class="w-80">
                        <el-input v-model="formData.copyright_mobile" placeholder="请输入手机号" clearable />
                    </div>
                </el-form-item>
                <el-form-item label="版权图标" prop="copyright_text" v-if="formData.copyright_style != 1">
                    <div class="w-80">
                        <material-picker v-model="formData.copyright_image" :limit="1" />
                    </div>
                </el-form-item>
            </el-card>
        </el-form>
        <footer-btns v-perms="['setting.web.web_setting/setWebsite']">
            <el-button type="primary" @click="handleSubmit">保存</el-button>
        </footer-btns>
    </div>
</template>

<script lang="ts" setup name="webInformation">
import { getCp, setCp } from "@/api/setting/website";
import useAppStore from "@/stores/modules/app";
import type { FormInstance } from "element-plus";
const formRef = ref<FormInstance>();

const appStore = useAppStore();
// 表单数据
const formData = reactive({
    copyright_switch: 2,
    copyright_text: '',
    copyright_mobile: "",
    copyright_style: 1,
    copyright_image: "",
    copyright_is_strortext: 1
});
const changestro = () => {
    console.log("123")
    formData.copyright_text = ""
}
const changestyle = (type: any) => {
    formData.copyright_style = type
    formData.copyright_text = ""
}
// 表单验证
const rules = {
};

// 获取备案信息
const getData = async () => {
    const data = await getCp({});
    for (const key in formData) {
        //@ts-ignore
        formData[key] = data[key];
    }
};

// 设置备案信息
const handleSubmit = async () => {
    await formRef.value?.validate();
    await setCp(formData);
    appStore.getConfig();
    getData();
};

getData();
</script>

<style lang="scss" scoped>
.boxcoprigth {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(244, 246, 248);
    width: 200px;
    height: 64px;
    cursor: pointer;
    margin-left: 10px;
}

.border-box {
    border: 1px solid rgb(45, 140, 240)
}

.boxcopyright:first-of-type {
    margin-left: 0;
}
</style>
